<template>
  <transition name="bounce" mode="out-in">
  <div class="mui-content mh-containe pd">
    <mh-header headName="选择收信人" :showAllChoose="showAllChoose" @allChoose="handleAllChoose"> </mh-header>
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item mui-active" href="javascript:"><span>我的红娘</span></a>
      <a class="mui-control-item" href="javascript:"><span>我的网友</span></a>
    </div>
    <div class="receiver-list">
      <ul>
        <li class="receiver-user"
            :class="{active: item.active}"
            v-for="(item, index) in myMatcher"
            :key="item.id"
            @tap="handleChoose(index)"
        >
          <img class="choose-pic" :src="item.avatar" alt="头像">
          <span v-text="item.name">-</span>
        </li>
      </ul>
    </div>
    <div class="confirm">确定</div>
  </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "msg-choose-contact",
    data () {
      return {
        showAllChoose: true,
        selectAll: false,
        myMatcher: [
          {
            id: '1',
            name: '章章',
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2422791850,1824313689&fm=26&gp=0.jpg',
            active: true
          },
          {
            id: '2',
            name: '埃美柯关',
            avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3837057392,1344340465&fm=11&gp=0.jpg',
            active: false
          },
          {
            id: '3',
            name: '石田惠理',
            avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4081810841,2219722192&fm=11&gp=0.jpg',
            active: false
          }
        ]
      }
    },
    methods: {
      handleChoose (i) {
        this.$set(this.myMatcher[i], 'active', !this.myMatcher[i].active)
      },
      handleAllChoose () {
        if (this.selectAll) {
          this.selectAll = false;
          this.myMatcher.map(item => {
            item.active = false;
          })
        }else {
          this.selectAll = true;
          this.myMatcher.map(item => {
            item.active = true;
          })
        }
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mui-content {height: 100%;}
  .confirm {
    position: fixed;
    width: 100%;
    padding: 1.5rem;
    background-color: #e685aa;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    left: 0;
    bottom: 0;
  }
  .receiver-list {
    background-color: #fff;
  }
  .choose-pic {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
  }
  .receiver-user {
    position: relative;
    padding: .7rem 1rem .7rem 4.5rem;
    border-top: 1px solid #eee;
    &:before {
      @include ct;
      content: '';
      width: 2.6rem;
      height: 2.6rem;
      background: url("../../assets/images/ico/ic_m_off.png") no-repeat left center;
      background-size: 100% 100%;
      left: 1rem;
    }
    &.active {
      &:before {
        background: url("../../assets/images/ico/ic_m_on.png") no-repeat left center;
        background-size: 100% 100%;
      }
    }
  }
</style>
